23.05.04

오늘 한 일

1. 알고리즘 문제 풀기
   1. https://github.com/kangju2000/Algorithm/commit/88b3b5c9e7559114f463e1f479c339cbf6c13f8f
2. 바닐라 JS 스터디 정리 후 발표
3. 익스텐션 필요 기능 구현
   1. 백그라운드 모달 구현
   2. 새로 고침 버튼 추가
   3. suspense 대신 조건 분기로 임시 구현
      1. 문제점 파악 후 이슈 등록
4. “구똑” 프로젝트 데이터 수집

바닐라 JS 스터디

VirtualDOM을 구현했다. 발표 정리 내용을 링크에 적어두었다. 노션 링크

익스텐션 개발

백그라운드 Modal 구현

Modal을 쓸 때 백그라운드가 필요없는 경우도 있어서 선택적으로 사용할 수 있도록 구현했다.

import { forwardRef } from 'react';

type ModalProps = {
  isOpen: boolean;
  children: React.ReactNode;
  className?: string;
};

const Modal = ({ isOpen, className, children }: ModalProps) => {
  return isOpen ? <div className={`bg-white ${className}`}>{children}</div> : null;
};

type ModalBackgroundProps = {
  isOpen: boolean;
  children: React.ReactNode;
  onClick?: (e: React.MouseEvent) => void;
};

const ModalBackground = (
  { isOpen, children, onClick }: ModalBackgroundProps,
  ref: React.RefObject<HTMLDivElement>,
) => {
  return (
    isOpen && (
      <div
        className="fixed top-0 left-0 w-full h-full bg-[rgba(0,0,0,0.5)]"
        onClick={onClick}
        ref={ref}
      >
        {children}
      </div>
    )
  );
};

Modal.Background = forwardRef(ModalBackground);

export default Modal;

suspense 대신 분기 처리

Chrome extension에서 dynamic import가 잘 안되는 이슈가 있어서 일단 임시로 분기 처리를 했다.

{assignmentList === null ? (
  <div className="flex justify-center items-center flex-grow">
    <p>로딩중...</p>
  </div>
) : (
  <AssignmentList
    assignmentList={assignmentList}
    courseList={courseList}
    selectedCourseId={selectedCourse.id}
    sortType={sortType}
    statusType={statusType}
  />
)}

일단 구현 빨리 하고 배포한 뒤에 시간 있을 때 이슈를 올릴 예정이다.